<template>
	<view class="container">
		<view class="image-container">
			<image src="https://huishi-big-event.oss-cn-beijing.aliyuncs.com/PixPin_2024-07-17_10-29-25.png"
				style="height: 100%; width: 100%;" mode="widthFix" @load="onImageLoad" />
			<image :style="signatureStyle" style="width: 256px;height: 107px;border: red 1px solid;"
				src="https://www.yishuzi.cn/qianming/image.png?fsize=50&font=jfcs.ttf&text=%E5%A4%A7%E5%B0%B8%E5%85%84&mirror=no&color=111&vcolor=111&bgcolor=fff&alpha=no&output=png&spacing=4&shadow=no&transparent=no&icon=no&iconic=&top_spacing=5&left_spacing=6&icon_size=48"
				alt="" />
		</view>

		<view class="">
			<button @click="mergeImages">合并图片</button>
			<image v-if="mergedImage" :src="mergedImage" alt="Merged Image" class="merged-image" />
		</view>

		<!-- 添加canvas元素 -->
		<canvas canvas-id="myCanvas" style="width: 300px; height: 300px; position: absolute; left: -9999px;"></canvas>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mergedImage: '',
				signatureStyle: {
					position: 'absolute',
					top: '100px',
					left: '100px',
				}
			}
		},
		onLoad() {
		  Promise.all([
		    this.preloadImage('https://huishi-big-event.oss-cn-beijing.aliyuncs.com/PixPin_2024-07-17_10-29-25.png'),
		    this.preloadImage('https://www.yishuzi.cn/qianming/image.png?fsize=50&font=jfcs.ttf&text=%E5%A4%A7%E5%B0%B8%E5%85%84&mirror=no&color=111&vcolor=111&bgcolor=fff&alpha=no&output=png&spacing=4&shadow=no&transparent=no&icon=no&iconic=&top_spacing=5&left_spacing=6&icon_size=48')
		  ]).then(() => {
		    console.log('All images preloaded');
		  }).catch(error => {
		    console.error('Failed to preload images:', error);
		  });
		},
		methods: {
			onImageLoad() {
				// 图片加载完成后的处理逻辑
			},
			mergeImages() {
				console.log('Merging images...');
				const ctx = uni.createCanvasContext('myCanvas', this);
				console.log('Canvas context created');

				// 绘制背景图
				ctx.drawImage('https://huishi-big-event.oss-cn-beijing.aliyuncs.com/PixPin_2024-07-17_10-29-25.png', 0, 0,
					300, 300);
				console.log('Background image drawn');

				// 绘制签名图
				ctx.drawImage(
					'https://www.yishuzi.cn/qianming/image.png?fsize=50&font=jfcs.ttf&text=%E5%A4%A7%E5%B0%B8%E5%85%84&mirror=no&color=111&vcolor=111&bgcolor=fff&alpha=no&output=png&spacing=4&shadow=no&transparent=no&icon=no&iconic=&top_spacing=5&left_spacing=6&icon_size=48',
					100, 100, 256, 107);
				console.log('Signature image drawn');

				ctx.draw(true);
				console.log('Draw completed');
				setTimeout(() => {
				  uni.canvasToTempFilePath({
				    canvasId: 'myCanvas',
				    success: (res) => {
				      this.mergedImage = res.tempFilePath;
				      console.log('123456');
				      console.log('Merged image:', this.mergedImage);
				    },
				    fail: (error) => {
				      console.error('Failed to merge images:', error);
				    },
				    complete: () => {
				      console.log('canvasToTempFilePath completed');
				    }
				  }, this);
				}, 100);
			}
		}
	}
</script>

<style scoped>
	.container {
		position: relative;
	}

	.image-container {
		position: relative;
		display: inline-block;
	}

	.background-image {
		max-width: 100%;
		height: auto;
	}

	.signature-image {
		max-width: 50%;
		height: auto;
	}

	.merged-image {
		max-width: 100%;
		height: auto;
		margin-top: 20px;
	}
</style>